<template>
  <view class="order-details flex-column" :style="orderDetailsH5">
    <QcscrollUni
      ref="mescrollRef"
      :getData="getData"
      :top="topScroll"
      :bottom="bottomScroll"
      :height="heightScroll">
      <view class="details-item" v-for="(item, index) in ticketOrder.list" :key="index">
        <view class="title-check" @tap="tapSelect(item, index)">
          <text class="title text-bold" v-if="item.orderType == 1">
            占用单号：{{ item.orderId }}
          </text>
          <view class="title text-bold" v-else>订单号：{{ item.orderId }}</view>
          <view class="iconfont" :class="item['isActive'] ? 'icon-select1' : 'unselect'"></view>
        </view>
        <view class="info">
          <view class="left flex-column">
            <text class="test" v-if="item.orderType == 0">支付电费</text>
            <text class="test" v-if="item.orderType == 0">支付服务费</text>
            <text class="test" v-if="item.orderType == 1">超时占用费</text>
            <text class="test">支付时间</text>
            <text class="test">合计</text>
          </view>
          <view class="right flex-column">
            <text class="test" v-if="item.orderType == 0">
              {{ item.powerPersonalAmount ? `￥${item.powerPersonalAmount}` : '--' }}
            </text>
            <text class="test" v-if="item.orderType == 0">
              {{ item.servicePersonalAmount ? `￥${item.servicePersonalAmount}` : '--' }}
            </text>
            <text class="test" v-if="item.orderType == 1">
              {{ item.occupyPersonalAmount ? `￥${item.occupyPersonalAmount}` : '--' }}
            </text>
            <text class="test">
              {{ item.createTime ? `${item.createTime}` : '--' }}
            </text>
            <text class="test">
              {{ item.totalPersonalAmount ? `￥${item.totalPersonalAmount}` : '--' }}
            </text>
          </view>
        </view>
      </view>
    </QcscrollUni>
    <!-- 底部按钮 -->
    <view class="bottom-wrap" :style="styleBottom">
      <view class="top-content">
        <view class="check2" style="font-size: 30rpx">
          已选
          <text class="discount">{{ ticketOrder.selectId.length }}</text>
          个， 合计 ￥
          <text class="discount">{{ ticketOrder.totalAmounts }}</text>
        </view>
      </view>
      <view class="bottom-content">
        <view class="left">
          <view class="money-wrap">
            <view class="select-wrap" @tap="tapAllSelect">
              <view
                class="iconfont"
                :class="ticketOrder.selectInx ? 'half-select' : 'unselect'"
                v-if="
                  ticketOrder.selectInx && ticketOrder.list.length !== ticketOrder.selectId.length
                ">
                -
              </view>
              <view
                class="iconfont"
                :class="ticketOrder.selectInx ? 'icon-select1' : 'unselect'"
                v-else></view>
              <text>本页全选</text>
            </view>
          </view>
        </view>
        <view class="right">
          <button class="bnt-wrap bnt-apply" @tap="tapApply()">申请开票</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import QcscrollUni from '@/components/qcscroll/qcscrollUni.vue';
import { getSystemInfo, getwv } from '@mixins/info';
import { pagingTicketOrder } from '@/service/apis/mine';
const $toast: any = inject('$Toast');

const styleBottom = `height: calc(216rpx + ${getSystemInfo().safeBottom}px)`;

const topScroll = '114rpx';
const bottomH = Number(110) + Number(`${getSystemInfo().safeBottom}`);
const bottomScroll = `${bottomH}px`;
let heightScroll = ref(`${getSystemInfo().screenHeight - bottomH - getwv(136)}px`);
// #ifdef H5
heightScroll.value = `${
  getSystemInfo().screenHeight -
  110 -
  getSystemInfo().safeBottom -
  getSystemInfo().navHeight -
  getwv(53)
}px`;
// #endif
const orderDetailsH5 = computed(() => {
  // #ifdef H5
  return `height: ${getSystemInfo().screenHeight - getSystemInfo().navHeight - getwv(53)}px`;
  // #endif
  return '';
});

let ticketOrder = reactive({
  list: [] as Array<any>,
  selectId: [] as Array<any>,
  money: 0,
  ticketOrderData: [] as Array<any>,
  selectInx: false,
  totalAmounts: '0.00',
  serviceMoney: '0.00',
  powerMoney: '0.00',
  occupyMoney: '0.00',
});
const getData = (extraParams: { pageNum: number; pageSize: number }) => {
  return new Promise(resolve => {
    pagingTicketOrder({}, extraParams)
      .then((res: any) => {
        if (extraParams.pageNum === 1) {
          ticketOrder.list = res.dataList;
          ticketOrder.selectId = [];
          ticketOrder.totalAmounts = '0.00';
          ticketOrder.ticketOrderData = [];
        } else {
          ticketOrder.list = [...ticketOrder.list, ...res.dataList];
        }
        resolve({ list: ticketOrder.list, total: res.totalCount });
      })
      .catch(() => {
        resolve({ list: [], total: 0 });
      });
  });
};
// 单选并且计算对应金额
const tapSelect = (item: any, index: number) => {
  ticketOrder.list[index].isActive = !ticketOrder.list[index].isActive;
  console.log('ticketOrderData==2222===', ticketOrder.ticketOrderData);
  if (ticketOrder.list[index].isActive) {
    ticketOrder.selectId.push(item.id);
    ticketOrder.ticketOrderData.push(item);
  } else {
    let newSet = new Set(ticketOrder.selectId);
    newSet.delete(item.id);
    ticketOrder.selectId = [...newSet];
    ticketOrder.ticketOrderData = ticketOrder.ticketOrderData.filter(value => {
      return value.id != item.id;
    });
  }
  console.log('selectInx=====', ticketOrder.selectInx);

  if (ticketOrder.ticketOrderData.length == 0) {
    ticketOrder.selectInx = false;
  } else if (ticketOrder.ticketOrderData.length == ticketOrder.list.length) {
    ticketOrder.selectInx = true;
  }
  console.log('ticketOrderData=====', ticketOrder.ticketOrderData);

  ticketOrder.money = ticketOrder.ticketOrderData.reduce((prev, next) => {
    return Number(prev) + Number(next.totalPersonalAmount);
  }, 0);
  ticketOrder.totalAmounts = ticketOrder.money.toFixed(2);
  // 电费
  const powerMoney = ticketOrder.ticketOrderData.reduce((prev, next) => {
    console.log(prev);
    console.log(next.powerPersonalAmount);
    return Number(prev) + Number(next.powerPersonalAmount);
  }, 0);
  console.log(powerMoney);

  ticketOrder.powerMoney = powerMoney.toFixed(2);
  // 服务费
  const serviceMoney = ticketOrder.ticketOrderData.reduce((prev, next) => {
    return Number(prev) + Number(next.servicePersonalAmount);
  }, 0);
  ticketOrder.serviceMoney = serviceMoney.toFixed(2);
  // 超时占用费
  const occupyMoney = ticketOrder.ticketOrderData.reduce((prev, next) => {
    console.log('超时占用费======', prev, next.occupyPersonalAmount);
    return Number(prev) + Number(next.occupyPersonalAmount);
  }, 0);
  ticketOrder.occupyMoney = occupyMoney.toFixed(2);
};
// 全选
const tapAllSelect = () => {
  // 判断如果订单数量和已选择数据数量一致,则全选或者全部选
  // 如果不一样则已选中
  if (ticketOrder.list.length == ticketOrder.selectId.length) {
    ticketOrder.list.map((item, index) => {
      ticketOrder.list[index].isActive = !ticketOrder.list[index].isActive;
    });
    ticketOrder.selectInx = !ticketOrder.selectInx;
  } else {
    ticketOrder.list.map((item, index) => {
      ticketOrder.list[index].isActive = true;
    });
    ticketOrder.selectInx = true;
  }
  if (ticketOrder.selectInx) {
    ticketOrder.selectId = ticketOrder.list.map(item => {
      return item.id;
    });
    console.log('ticketOrder.selectId ====1111===', ticketOrder.selectId);
    // 总金额
    ticketOrder.money = ticketOrder.list.reduce((prev, next) => {
      return Number(prev) + Number(next.totalPersonalAmount);
    }, 0);
    ticketOrder.totalAmounts = ticketOrder.money.toFixed(2);
    // 电费
    const powerMoney = ticketOrder.list.reduce((prev, next) => {
      return Number(prev) + Number(next.powerPersonalAmount);
    }, 0);
    ticketOrder.powerMoney = powerMoney.toFixed(2);
    // 服务费
    const serviceMoney = ticketOrder.list.reduce((prev, next) => {
      return Number(prev) + Number(next.servicePersonalAmount);
    }, 0);
    ticketOrder.serviceMoney = serviceMoney.toFixed(2);
    // 超时占用费
    const occupyMoney = ticketOrder.list.reduce((prev, next) => {
      return Number(prev) + Number(next.occupyPersonalAmount);
    }, 0);
    ticketOrder.occupyMoney = occupyMoney.toFixed(2);
    ticketOrder.ticketOrderData = ticketOrder.list;
  } else {
    ticketOrder.selectId = [];
    ticketOrder.totalAmounts = '0.00';
    ticketOrder.ticketOrderData = [];
  }
  console.log('ticketOrderData=======ticketOrder', ticketOrder.ticketOrderData);
};
const tapApply = () => {
  console.log(ticketOrder.selectId);
  if (ticketOrder.selectId.length > 0) {
    uni.navigateTo({
      url: `/pagesMyCenter/myBilling/applyInvoiceStepOne?powerMoney=${ticketOrder.powerMoney}&&serviceMoney=${ticketOrder.serviceMoney}&&occupyMoney=${ticketOrder.occupyMoney}&&orderId=${ticketOrder.selectId}`,
    });
  } else {
    $toast('请先勾选对应开票数据');
  }
};
onShow(() => {
  getData();
});
</script>

<style lang="scss" scoped>
.order-details {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #f2f2f2;
  // #ifdef H5
  box-sizing: border-box;
  padding-top: 10px;
  // #endif

  .icon-select1 {
    color: $uni-color-primary;
    font-size: 20px;
    margin: auto 4px;
  }

  .unselect {
    width: 20px;
    height: 20px;
    border: 1px solid $uni-color-primary;
    border-radius: 50%;
    box-sizing: border-box;
    margin: auto 4px;
  }

  .half-select {
    font-size: 30px;
    margin: auto 4px;
    width: 18px;
    height: 18px;
    line-height: 15px;
    color: #fff;
    background-color: $uni-color-primary;
    border: 1px solid $uni-color-primary;
    border-radius: 18px;
    text-align: center;
  }

  .details-item {
    margin: 0 12px;
    padding: 16px;
    background-color: #fff;
    font-size: 14px;
    color: #545454;
    border-bottom: 1px dashed #d5d5d5;
    border-radius: 8px;

    .title-check {
      display: flex;
      justify-content: space-between;
    }

    &:last-child {
      border: 0;
    }

    .title {
      line-height: 24px;
      color: #000;
      width: 90%;
    }

    .info {
      display: flex;

      .left {
        width: 40%;
      }

      .right {
        width: 60%;
        text-align: right;
      }

      .test {
        margin-top: 8px;
      }
    }

    .coupon-wrap {
      width: 100%;
      margin-top: 8px;
    }
  }

  .bottom-wrap {
    position: fixed;
    // display: flex;
    width: 100vw;
    bottom: 0;
    background-color: #fff;
    z-index: 99;

    .top-content {
      display: flex;
      padding: 8px 10px;

      .discount {
        line-height: 18px;
        font-size: 14px;
        color: $uni-color-primary;
      }
    }

    .bottom-content {
      display: flex;
      justify-content: space-between;

      .money-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .select-wrap {
        // position: absolute;
        display: flex;
        height: 100%;
        right: 8px;

        .icon-select1 {
          color: $uni-color-primary;
          font-size: 20px;
        }

        .unselect {
          width: 20px;
          height: 20px;
          border: 1px solid $uni-color-primary;
          border-radius: 50%;
          box-sizing: border-box;
        }
      }

      .left {
        flex: 1;
        height: 44px;
        margin: 9px 16px;
        color: #000;
        font-weight: 14px;

        .money-wrap {
          line-height: 44px;
          margin-bottom: 4px;
        }

        .money {
          line-height: 24px;
          margin-left: 8px;
          font-size: 20px;
        }
      }

      .right {
        flex: 1;
        margin: 9px 0 9px 16px;

        .bnt-apply {
          width: 136px;
          height: 44px;
          border-radius: 50px;
        }
      }
    }
  }

  .bottom {
    width: 100%;
    height: 96px;
    position: absolute;
    bottom: 36px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid #f1f2f3;
  }
}
</style>